<template>
  <div class="details">
    <el-scrollbar wrap-class="scrollbar-view">
      <DetailLeft v-model:sidebarData="knowledgeTree" @toDetail="toDetail" />
    </el-scrollbar>
    <DetailRight />
  </div>
</template>
<script setup>
import { toRefs } from 'vue'
import DetailLeft from './DetailLeft.vue'
import DetailRight from './DetailRight.vue'
import { useRoute, useRouter } from 'vue-router'

import { useKnowledgeStore } from '@/stores/knowledge-store'

const route = useRoute()
const router = useRouter()

const toDetail = record => {
  console.log(record, 989999988888)
  const query = {
    ...route.query,
    task_id: record.task_id,
    task_name: record.task_name,
    origin_task_id: record.origin_task_id
  }
  console.log(record.task_id)
  const r = router.resolve({
    name: 'details',
    query
  })
  window.open(r.href, '_blank')
}

const { knowledgeTree } = toRefs(useKnowledgeStore())

route.meta.title = route.query.name
</script>
<style lang="less" scoped>
.details {
  display: flex;
  width: 100%;
  height: 95vh;
  gap: 20px;

  :deep(.el-scrollbar) {
    border-radius: 14px;
    min-width: 388px;

    .scrollbar-view {
      height: 100%;
      background-color: #fff;
    }
  }
}
</style>
